<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button type="primary" icon="el-icon-plus" @click="add" v-auth="'task.add'"></el-button>
				<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length == 0" @click="batch_del" v-auth="'task.delete'"></el-button>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<!-- <el-input v-model="search.task_name" placeholder="项目名称" clearable @keyup.enter="upsearch"></el-input> -->
					<el-input v-model="search.task_name" placeholder="任务名称" clearable @keyup.enter="upsearch"></el-input>
					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="table" :apiObj="apiObj" row-key="id" @selection-change="selectionChange">
				<el-table-column type="selection" width="50" align="center"></el-table-column>
                <el-table-column label="任务明细" type="expand" width="150">
                    <template #default="props">
                        <scTable :data="props.row.list" row-key="id" hidePagination hideDo>
                            <el-table-column label="任务类型" prop="task_type" align="center">
                                <template #default="scope">
                                    {{$t(scope.row.task_type == 1 ? '布场任务' : scope.row.task_type == 2 ? '撤场任务' : '临时任务')}}
                                </template>
                            </el-table-column>
                            <el-table-column label="任务名称" prop="task_name" align="center"></el-table-column>
                            <el-table-column label="任务地点" prop="task_address" align="center"></el-table-column>
                            <el-table-column label="任务负责人" prop="task_staff" align="center"></el-table-column>
                            <el-table-column label="负责人电话" prop="task_mobile" align="center"></el-table-column>
                            <el-table-column label="备注" prop="remark" align="center"></el-table-column>
                            <el-table-column label="任务二维码" align="center">
                                <template #default="scope">
                                    <el-image v-if="scope.row.qr_code" style="width: 50px; height: 50px; border-radius: 5px;" :src="scope.row.qr_code" :preview-src-list="[scope.row.qr_code]" preview-teleported="true" hide-on-click-modal align="center"></el-image>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" fixed="right" align="center" width="160">
                                <template #default="scope">
                                    <el-button-group>
                                        <el-button text type="primary" size="small" @click="table_show(scope.row, scope.$index)" v-auth="'task.show'">查看</el-button>
                                        <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)" v-auth="'task.edit'">编辑</el-button>
                                        <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
                                            <template #reference>
                                                <el-button text type="danger" size="small" v-auth="'task.delete'">删除</el-button>
                                            </template>
                                        </el-popconfirm>
                                        <el-button text type="primary" size="small" @click="table_staff(scope.row, scope.$index)" v-auth="'task.show'">领取人员</el-button>
                                    </el-button-group>
                                </template>
                            </el-table-column>
                        </scTable>
                    </template>
                </el-table-column>
				<el-table-column label="关联项目" prop="project.metting"></el-table-column>
				<!-- <el-table-column label="任务总人数" prop=""></el-table-column>
				<el-table-column label="任务总时长" prop=""></el-table-column> -->
			</scTable>
		</el-main>
	</el-container>

	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save = false"></save-dialog>
    <staff-list v-if="dialog.staff" ref="staffDialog" @success="handleSaveSuccess" @closed="dialog.staff = false"></staff-list>

</template>

<script>
import saveDialog from './save'
import StaffList from './staffList.vue'

export default {
	name: 'dept',
	components: {
		saveDialog,StaffList
	},
	data() {
		return {
			dialog: {
				save: false
			},
			apiObj: this.$API.task.task.list,
			selection: [],
			search: {
				task_name: null
			},
            id: "",
		}
	},
	methods: {
		//添加
		add() {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open()
			})
		},
		//编辑
		table_edit(row) {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('edit').setData(row)
			})
		},
		//查看
		table_show(row) {
			this.dialog.save = true
			this.$nextTick(() => {
				this.$refs.saveDialog.open('show').setData(row)
			})
		},
        // 任务打卡人
        table_staff(row) {
			this.dialog.staff = true
			this.$nextTick(() => {
				this.$refs.staffDialog.open('edit').setData(row.id)
			})
		},
		//删除
		async table_del(row) {
			var reqData = { id: row.id }
			var res = await this.$API.task.task.delete.post(reqData);
			if (res.code == 1) {
				this.$refs.table.refresh()
				this.$message.success("删除成功")
			} else {
				this.$alert(res.message, "提示", { type: 'error' })
			}
		},
		async table_del_all(delete_ids) {
			var reqData = { ids: delete_ids }
			var res = await this.$API.task.task.delete.post(reqData);
			if (res.code == 1) {
				this.$refs.table.refresh()
				this.$message.success("删除成功")
			} else {
				this.$alert(res.message, "提示", { type: 'error' })
			}
		},
		//批量删除
		async batch_del() {
			var delete_ids = [];
			this.selection.forEach((item) => {
				delete_ids.push(item.id)
			})

			this.$confirm(`确定删除选中的 ${this.selection.length} 项吗？`, '提示', {
				type: 'warning'
			}).then(() => {
				this.table_del_all(delete_ids)
			}).catch(() => {

			})
		},
		//表格选择后回调事件
		selectionChange(selection) {
			this.selection = selection;
		},
		//搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
		//本地更新数据
		handleSaveSuccess(data, mode) {
			if (mode == 'add') {
				this.$refs.table.refresh()
			} else if (mode == 'edit') {
				this.$refs.table.refresh()
			}
		}
	}
}
</script>

<style>
.search-input {
    width: auto;
    font-size: 14px;
}

.el-overlay {
    z-index: 1023 !important;
}
</style>
